<template>
  <div class="container">
    <!-- 资格认证审核表格 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>资格认证审核</span>
      </div>
      <el-table :data="qualificationReviewData" style="width: 100%">
        <el-table-column prop="index" label="序号">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="type" label="认证类型"></el-table-column>
        <el-table-column prop="file" label="上传文件">
          <template slot-scope="scope">
            <img :src="scope.row.file" alt="uploaded file" width="50" @click="viewImage(scope.row.file)">
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is ? 'success' : 'danger'" style="margin-right: 5px">{{ scope.row.is ? '合格' : '未审批' }}</el-tag>
            <el-button size="mini" :type="scope.row.is ? 'danger' : 'primary'" @click="approveQualification(scope.$index)">{{ scope.row.is ? '驳回' : '通过' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 用户评论审核表格 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户评论审核</span>
      </div>
      <el-table :data="userCommentReviewData" style="width: 100%">
        <el-table-column prop="index" label="序号">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="comment" label="评论"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tag :type="scope.row.autoApproval ? 'success' : 'danger'" style="margin-right: 5px">{{ scope.row.autoApproval ? '合格' : '不合格' }}</el-tag>
            <el-button size="mini" :type="scope.row.autoApproval ? 'danger' : 'primary'" @click="approveComment(scope.$index)">{{ scope.row.autoApproval ? '驳回' : '通过' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 发布文章审核表格 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发布文章审核</span>
      </div>
      <el-table :data="articleReviewData" style="width: 100%">
        <el-table-column prop="index" label="序号">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="用户姓名"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="type" label="文章类型"></el-table-column>
        <el-table-column prop="section" label="文章专区"></el-table-column>
        <el-table-column prop="content" label="正文内容">
          <template slot-scope="scope">
            <div class="ellipsis" @click="viewContent(scope.row.content)">
              {{ scope.row.content }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is ? 'success' : 'danger'" style="margin-right: 5px">{{ scope.row.is ? '合格' : '未通过' }}</el-tag>
            <el-button size="mini" :type="scope.row.is ? 'danger' : 'primary'" @click="rejectQualification(scope.$index)">{{ scope.row.is ? '驳回' : '通过' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 图片查看对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="25%">
      <img :src="dialogImageUrl" alt="查看图片" style="width: 100%;">
    </el-dialog>

    <!-- 正文查看对话框 -->
    <el-dialog :visible.sync="contentDialogVisible" width="50%">
      <div style="white-space: pre-wrap;">{{ dialogContent }}</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qualificationReviewData: [
        { name: '张三', type: '专家', file: require('@/assets/tupian/作证文件.png'), is:false},
        { name: '李四', type: '讲师', file: require('@/assets/tupian/1.png'), is:false},
      ],
      userCommentReviewData: [
        { name: '王五', comment: '这是一条评论，很有参考价值！', time: '2024-08-01 10:00:00', autoApproval: true },
        { name: '赵六', comment: '这篇文章写得不错，值得一读。', time: '2024-08-01 11:00:00', autoApproval: true },
        { name: '孙七', comment: '谢谢分享，学到了很多。', time: '2024-08-01 12:00:00', autoApproval: true },
        { name: '周八', comment: '内容不错，但是还有改进的空间。', time: '2024-08-01 13:00:00', autoApproval: true },
        { name: '吴九', comment: '写得什么****玩意？。', time: '2024-08-01 14:00:00', autoApproval: false },
      ],
      articleReviewData: [
        {
          userName: '钱七',
          title: '科普文章：现代农业',
          type: '科普',
          section: '养老',
          content: '随着现代科技的发展，农业生产也逐渐现代化。'.repeat(20),
          is: false
        },
        {
          userName: '孙八',
          title: '技术文章：人工智能',
          type: '技术',
          section: '医疗',
          content: "人工智能（AI）在医疗领域的应用确实在不断扩展，它为医疗行业带来了许多创新和改进。以下是一些人工智能在医疗领域应用的例子：\n" +
              "\n" +
              "诊断辅助：AI可以通过图像识别技术辅助医生分析医学影像，如X光片、CT扫描和MRI，以识别疾病迹象。\n" +
              "\n" +
              "病理学分析：AI算法可以分析病理切片图像，帮助病理学家识别和分类细胞和组织的变化。\n" +
              "\n" +
              "药物发现和开发：AI可以加速新药的发现过程，通过分析大量数据来预测药物的效果和副作用。\n" +
              "\n" +
              "个性化医疗：AI可以根据患者的遗传信息、生活方式和病史提供个性化的治疗方案。\n" +
              "\n" +
              "患者监护：智能穿戴设备和远程监控系统可以实时跟踪患者的健康状况，并在必要时提醒医生或患者。\n" +
              "\n" +
              "手术辅助：机器人手术系统可以提高手术的精确度和成功率，减少手术风险。\n" +
              "\n" +
              "人工智能在医疗领域的应用正在不断深化，它不仅提高了医疗服务的质量和效率，还为患者带来了更加精准和个性化的治疗方案。AI技术通过分析大量的医疗数据，帮助医生在诊断过程中更快地识别疾病特征，减少了误诊和漏诊的可能性。在药物研发领域，AI能够快速筛选潜在的药物分子，预测其效果和副作用，从而缩短新药的研发周期并降低成本。\n" +
              "\n" +
              "个性化医疗是AI应用的一个重要方向，通过分析患者的遗传信息、生活方式和病史，AI能够为患者提供定制化的治疗方案。此外，智能监护设备和远程监控系统能够实时跟踪患者的健康状况，及时发现异常并预警，这对于慢性病患者和老年人尤为重要。\n" +
              "\n" +
              "在手术领域，AI辅助的机器人手术系统提高了手术的精确性和安全性，尤其是在复杂的微创手术中，机器人的稳定性和精确度远超人类。AI在临床决策支持方面也发挥着重要作用，通过分析患者的电子健康记录，为医生提供诊断和治疗建议，帮助他们做出更好的决策。\n" +
              "\n" +
              "AI在流行病学研究中的应用，能够预测疾病爆发的趋势，为公共卫生政策的制定提供科学依据。在心理健康领域，AI聊天机器人和应用程序能够提供初步的心理评估和干预，帮助用户管理情绪和压力。此外，AI在医疗管理方面的应用，如优化医院资源分配、减少患者等待时间，也极大地改善了患者的就医体验。\n" +
              "\n" +
              "随着技术的不断发展，人工智能与医疗领域的结合将更加紧密，未来可能会有更多创新的AI应用出现，如通过深度学习模型来预测疾病的长期发展趋势，或者开发更加智能的医疗设备来辅助医生进行更复杂的诊断和治疗。这些进步将为医疗行业带来革命性的变化，提高医疗服务的可及性和质量，最终实现对全球健康的重大贡献。",

          is: false
        },
        {
          userName: '周九',
          title: '生活文章：健康饮食',
          type: '生活',
          section: '防诈骗',
          content: '健康饮食对我们的身体有重要影响。'.repeat(20),
          is: false
        },
        {
          userName: '吴十',
          title: '科普文章：环境保护',
          type: '科普',
          section: '养老',
          content: '环境保护是我们每个人的责任。'.repeat(20),
          is: false
        },
        {
          userName: '郑十一',
          title: '技术文章：区块链',
          type: '技术',
          section: '医疗',
          content: '区块链技术在医疗记录中的应用前景广阔。'.repeat(20),
          is: false
        },
      ],
      dialogVisible: false,
      dialogImageUrl: '',
      contentDialogVisible: false,
      dialogContent: ''
    };
  },
  methods: {
    approveQualification(index) {
      this.qualificationReviewData[index].is = !this.qualificationReviewData[index].is;
      this.$message.success("操作成功");
    },
    rejectQualification(index) {
      this.articleReviewData[index].is = !this.articleReviewData[index].is;
      this.$message.success("操作成功");
    },
    approveComment(index) {
      this.userCommentReviewData[index].autoApproval = !this.userCommentReviewData[index].autoApproval;
      this.$message.success("操作成功");
    },
    rejectComment(index) {
      console.log(`Comment at index ${index} rejected`);
      // Add your logic here to handle rejection
    },
    approveArticle(index) {
      console.log(`Article at index ${index} approved`);
      // Add your logic here to handle approval
    },
    rejectArticle(index) {
      console.log(`Article at index ${index} rejected`);
      // Add your logic here to handle rejection
    },
    viewImage(fileUrl) {
      this.dialogImageUrl = fileUrl;
      this.dialogVisible = true;
    },
    viewContent(content) {
      this.dialogContent = content;
      this.contentDialogVisible = true;
    }
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box-card {
  width: 48%;
  margin-bottom: 20px;
}

.box-card:nth-child(3) {
  width: 100%;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>
